<template>
  <div class="layout">
    <el-container class="">
      <el-header class="layout-header" style="height:48px;" :span="24">
        <el-col :span="12">
          <div class="logo-img">
            <img src="../assets/images/zealfiLogo.png" alt="">
            福建省学生资助管理中心后台
          </div>
        </el-col>
        <el-col :span="12" class="user">
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner">
              <!-- <img src="../assets/images/user.png" /> -->
              <svg-icon icon-class="user-avatar" />
              <span>admin</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>操作手册下载</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-header>
      <el-container>
        <el-aside width="190px" :style="'height:'+ asideLeftHeight + 'px'">
          <sider-bar/>
        </el-aside>
        <el-container>
          <el-main style="overflow-y:scroll;">
            <breadcrumb />
            <main-content/>
          </el-main>
          <el-footer style="height:56px;">
            Copyright&nbsp;&copy;兴业消费金融股份公司
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import siderBar from './components/sildebar/sidebar.vue'
import Breadcrumb from '@/components/Breadcrumb'
import mainContent from '@/components/mainContent/mainContent'
export default {
  name: 'index',
  data () {
    return {
      asideLeftHeight: ''
    }
  },
  components: { siderBar, Breadcrumb, mainContent },
  mounted () {
    console.log(this.wHeight)
    this.setAsideLeft()
  },
  methods: {
    /** 动态设置左侧边栏的高度 */
    setAsideLeft () {
      this.asideLeftHeight = this.wHeight - 48
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.layout{
  .el-menu{
    background:#f8f8f8;
    border-right: 0px solid #e6e6e6;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 48px;
  }
  .el-footer{
    line-height: 56px;
    color:#478fca;
  }
  .el-aside {
    background-color: #f2f2f2;
    color: #333;
    text-align: center;
    line-height: 200px;
    border-right: 1px solid #e6e6e6;
  }
  .el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    padding: 0px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-table .cell, .el-table th div{
    text-align: center;
  }
  .el-table__header{
    thead{
      tr{
        background-color: #f2f2f2;
        th div{
            color: #307ecc;
        }
      }
    }
  }
  .el-dialog{
    width: 60%;
  }
  .mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset{
    white-space: normal;
  }
  .config-header{
    width: 100%;
    height: 38px;
    color: #FFF;
    font-size: 14px;
    line-height: 38px;
    text-align: left;
    text-indent: 12px;
    font-weight: 500;
    background-color: #307ecc;
    margin-bottom: 2px;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout{
  .layout-header{
    background-color:#468eb7;
    .logo-img{
      position: relative;
      height: 48px;
      text-align: left;
      color: #fff;
      font-size: 24px;
      font-weight: 500;
      line-height: 48px;
      img{
        width: 28px;
        height: 28px;
        vertical-align: middle;
      }
    }
    .user{
      text-align: right;
      span{
        // display: block;
        height: 48px;
        font-size: 20px;
        line-height: 48px;
        color:#fff;
        font-weight: 500;
        overflow: hidden;
        img{
          width: 30px;
          height: 30px;
          margin-right:5px;
          vertical-align: middle;
          border-radius: 50%;
          overflow: hidden;
        }
        .svg-icon{
          width: 1.8em;
          height: 1.8em;
          vertical-align: -0.6em;
        }
      }
    }
  }
}
</style>
